<!----------------引入头部文件-------------------->
<include file="Common/title" />

<script>
    mui.init();
</script>
<style>
    html,
    body {
        background-color: #efeff4;
    }

    span.mui-icon {
        font-size: 14px;
        color: #007aff;
        margin-left: -15px;
        padding-right: 10px;
    }
    .mui-off-canvas-right {
        color: #fff;
    }
    .title {
        margin: 35px 15px 10px;
    }
    .title+.content {
        margin: 10px 15px 35px;
        color: #bbb;
        text-indent: 1em;
        font-size: 14px;
        line-height: 24px;
    }
    input {
        color: #000;
    }
    .val{
        color:#fe6c00;
    }
    .ultype{
        margin:1px 0 8px;
    }
    .p1{
        font-size:0.7em;
    }
    .cat{
        margin:0;
        background:white;
    }
    .imgs{
        padding-left:6px;
    }
    .mui-card-footer a{
        color:white;
    }
    .gd{
        display:none;
    }
    .btn-left{
        width:30%;
        float:left;
        margin-left:15%;
    }
    .btn-right{
        width:30%;
        float:right;
        margin-right:15%;
    }
</style>
</head>

<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right" >
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title">筛选</div>
                <form class="mui-input-group" action="<?php echo U('filter_cpxllist','',FALSE); ?>" method="get" id="form1">
                    <input type="hidden" name="name" value="<?php echo $name;?>">
                <div class="mui-card-footer mui-table-view-inverted">
                    <a class="mui-card-link">分类</a>
                    <a class="mui-card-link" id="getfl">更多</a>
                </div>
                <ul class="mui-table-view mui-table-view-inverted uli">
                    <?php foreach($filter['wzfl'] as $k=>$v){
                        if($k<5){ ?>
                        <li class="mui-table-view-cell mui-checkbox mui-left">
                            <input name="flno[]" value="<?php echo $v['flno']; ?>" type="checkbox"><?php echo $v['flmc']; ?>
                        </li>
                    <?php }else if($k>=5){ ?>
                        <li class="mui-table-view-cell mui-checkbox mui-left gd flgd" >
                            <input name="flno[]" value="<?php echo $v['flno']; ?>" type="checkbox"><?php echo $v['flmc']; ?>
                        </li>
                    <?php } } ?>
				</ul>
                <div class="mui-card-footer mui-table-view-inverted">
                    <a class="mui-card-link">供应商</a>
                    <a class="mui-card-link" id="getgys">更多</a>
                </div>
                <ul class="mui-table-view mui-table-view-inverted uli">
                    <?php foreach($filter['gys'] as $k=>$v){
                        if($k<5){ ?>
                        <li class="mui-table-view-cell mui-checkbox mui-left">
                            <input name="gysno[]" value="<?php echo $v['gysno']; ?>" type="checkbox"><?php echo $v['qc']; ?>
                        </li>
                    <?php }else if($k>=5){ ?>
                        <li class="mui-table-view-cell mui-checkbox mui-left gd gysgd">
                            <input name="gysno[]" value="<?php echo $v['gysno']; ?>" type="checkbox"><?php echo $v['qc']; ?>
                        </li>
                    <?php }}?>
				</ul>
				
                    <div class="mui-content-padded btn">
                        <button id="reset" type="button" class="mui-btn mui-btn-danger btn-left" >重置</button>
                        <button id="offCanvasHide"  class="mui-btn mui-btn-danger btn-right" >确认</button>
                    </div>
                
                </form>
            </div>
        </div>
    </aside>
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
            <a  href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
            <h1 class="mui-title">系列列表</h1>
        </header>
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <button id="offCanvasShow" style="display:none" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px;">
                    	显示侧滑菜单
                </button>
                <div id="info">
                    <?php if(!$info){ ?>
                    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed ultype">
                        <li class="mui-table-view-cell">
                            <div class="mui-table">
                                <div class="mui-table-cell mui-col-xs-10">
                                    <p class="mui-h6 mui-ellipsis p1">根据您输入关键词没有查询到数据！</span></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <?php }else{ foreach($info as $k=>$v){ ?>
                    <ul xlno="<?=$v['cpxlno']?>" class=" mui-table-view mui-table-view-striped mui-table-view-condensed ultype">
                        <li class="mui-table-view-cell" >
                            <div class="mui-table">
                                <div class="mui-table-cell mui-col-xs-10">
                                    <a href="javascript:void(0);" style="color:black"><?php echo $v['xpxlmc']; ?></a>
                                    <p class="mui-h6 mui-ellipsis p1">型号 : 　　<span class="val"><?php echo $v['xh']; ?></span></p>
                                    <p class="mui-h6 mui-ellipsis p1">所属分类 : <span class="val"><?php echo $v['flmc']; ?></span></p>
                                    <p class="mui-h6 mui-ellipsis p1">供货商 : 　<span class="val"><?php echo $v['qc']; ?></span></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <?php }} ?>
                </div>
                <?php if($info):?>
                <div class="mui-content-padded cat" id="jz" style="display:block" >
                    <button  onclick="jiazai();" type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">加载更多</button>
                </div>
                <?php endif;?>
                <div style="height:50px;border:1px solid #EFEFF4"></div>
            </div>
        </div>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>

    <!-------------底部导航开始---------------->
    <include file="Common/nav"/>

</div>
<script>
    var name = '{$name}';          //该搜索内容
    var key = '{$key}';            //该搜索内容的缓存key
    var cpxlnos = '{$cpxlnos}';   //产品系列的ID集
    var tiaoshu = '{$tiaoshu}';   //取的数据总条数
    var zong_tiaoshu = '{$count}'; //数据的总条数

    //点击每个系列跳转函数
	function abc(){
    	var cpxlno = this.getAttribute('xlno');
        window.location.href = '__CONTROLLER__/cpxl_present/cpxlno/'+cpxlno;
    }

    //点击加载获取更多系列函数
    function jiazai(){
        var div_html = document.getElementById('info').innerHTML;
        //console.log(cpxlnos);
        mui.get('__CONTROLLER__/ajax_getcpxloffset',{
            key:key,tiaoshu:tiaoshu
        },function(vs){
            // console.log(data);
            if(vs.type == false){
                window.location.href = '__CONTROLLER__/cpxllist/name/'+name;
            }else {
                var data = vs.info;
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += '<ul xlno="' + data[i].cpxlno + '" class="mui-table-view mui-table-view-striped mui-table-view-condensed ultype"><li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-10"><a href="javascript:void(0);" style="color:black">' + data[i].xpxlmc + '</a><p class="mui-h6 mui-ellipsis p1">型号 : 　　<span class="val">' + data[i].xh + '</span></p><p class="mui-h6 mui-ellipsis p1">所属分类 : <span class="val">' + data[i].flmc + '</span></p><p class="mui-h6 mui-ellipsis p1">供货商 : 　<span class="val">' + data[i].qc + '</span></p></div></div></li></ul>';
                }
                document.getElementById('info').innerHTML = div_html + html;
                tiaoshu = vs.tiaoshu; //把ajax返回的条数更新

                //判断如果取的条数已经大于或等于总条数,加载按钮隐藏
                if (tiaoshu >= zong_tiaoshu) {
                    $('#jz').css('display', 'none');
                }
            }
        },'json');
    }


	mui.ready(function(){
		if(tiaoshu >= zong_tiaoshu){
            $('#jz').css('display','none');
        }
        //给ul绑定点击事件,这里用mui的tag事件,不能用click
        mui('#info').on('tap','.ultype',abc);

        //侧滑容器父节点
        var offCanvasWrapper = mui('#offCanvasWrapper');
        //主界面容器
        var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
        //菜单容器
        var offCanvasSide = document.getElementById("offCanvasSide");
        //移动效果是否为整体移动
        var moveTogether = false;
        //点击开启侧滑功能
        document.getElementById('offCanvasShow').addEventListener('tap', function() {
	        offCanvasWrapper.offCanvas('show');
	    });
	    document.getElementById('offCanvasHide').addEventListener('tap', function() {
	        offCanvasWrapper.offCanvas('close');
	    });
	    //主界面和侧滑菜单界面均支持区域滚动；
	    mui('#offCanvasSideScroll').scroll();
	    mui('#offCanvasContentScroll').scroll();
	    //实现ios平台的侧滑关闭页面；
	    if (mui.os.plus && mui.os.ios) {
	        offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
	            plus.webview.currentWebview().setStyle({
	                'popGesture': 'none'
	            });
	        });
	        offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
	            plus.webview.currentWebview().setStyle({
	                'popGesture': 'close'
	            });
	        });
	    }
        //分类筛选点击更多显示隐藏的数据
        document.getElementById('getfl').addEventListener('tap',function(){
            $('.flgd').css('display','block');
            $(this).css('display','none');
        });
        //供应商筛选点击更多显示隐藏的数据
        document.getElementById('getgys').addEventListener('tap',function(){
            $('.gysgd').css('display','block');
            $(this).css('display','none');
        });
        //重置表单
        document.getElementById('reset').addEventListener('tap',function(){
            $(":checkbox").prop("checked",false);
        })
	});

</script>
</body>
</html>